<!-- 
状态容器 需配合 workOrderCard 组件使用
 -->
<template>
	<view class="work-order-state-wrapper" :style="{
	 backgroundColor:info.backgroundColor
	}">
		<view class=" state">
			<fui-icon name="info" color="#fff" size="30rpx"></fui-icon>
			<text class="text">
				{{info.text}}
			</text>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {

		props: {
			state: {
				type: [String, Number],
				default: "1"
			}
		},
		computed: {
			info() {
				return this._state[this.state] || {
					backgroundColor: '',
					text: '-'
				}
			}
		},
		data() {
			return {

				_state: {
					"1": {
						backgroundColor: '#D54941',
						text: '紧急'
					},
					"2": {
						backgroundColor: '#E37318',
						text: '较急'
					},
				}
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.work-order-state-wrapper {
		padding: 4rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;



	}

	.state {
		display: flex;
		padding: 8rpx;
		align-items: center;
	}

	.text {
		font-size: 24rpx;
		font-weight: 600;
		color: #ffffff;
		margin-left: 16rpx;
	}
</style>